<template>

  <div class="week">
    <div class="week-desc">
      <div class="week-desc-content">
        ////////////
        <span>周末出游</span>
        ////////////
        <p>致力推荐超完美套餐</p>
      </div>
    </div>
    <div class="week-swiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item of weekendList" :key="item.id">
          <div class="weekSwiper-item">
            <div class="weekSwiper-item-img">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="weekSwiper-item-desc">
              {{item.desc}}
              <p>{{item.detail}}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'homeWeekend',
    props:{
      weekendList: Array
    },
    data() {
      return {
        // weekendList: [
        //   {
        //     id:"01",
        //     imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588179796154&di=507e0c03055ab271ff8b147cfe0e0162&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200424%2F430b70efc4f9477591cdfbb49487f9fb.jpeg",
        //     desc:"沾花湾",
        //     detail:'禅意假日 古韵风光'
        //   },
        //   {
        //     id:"02",
        //     imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588224707855&di=e656bcdf06cd39c59983e01e5b057b6e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200418%2Fe1b2cf51e882416ebaa55be339d6d5af.jpeg",
        //     desc:"沾花湾",
        //     detail:'禅意假日 古韵风光'
        //   },
        //   {
        //     id:"03",
        //     imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588224601252&di=3bc1ba321a299d4b1eeae2dc4277605e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200415%2F1d5d764ae48649668088ffbd67f7515e.jpeg",
        //     desc:"沾花湾",
        //     detail:'禅意假日 古韵风光'
        //   },
        //   {
        //     id:"04",
        //     imgUrl:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1618999347,1616625644&fm=15&gp=0.jpg",
        //     desc:"沾花湾",
        //     detail:'禅意假日 古韵风光'
        //   }
        // ],
        swiperOption: {
          freeMode:true,
          spaceBetween:20,
          slidesPerView:3
        }
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .week
    overflow: hidden
    height: 0
    padding-bottom: 58%
    border-top: .2rem solid #eee

  .week-desc
    position: relative
    overflow: hidden
    height: 0
    padding-bottom: 15.5%

  .week-desc-content
    text-align: center
    color: #aaa
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

  .week-desc-content > span
    display: inline-block
    color: #000
    font-weight: bold
    margin: .15rem .3rem

  .week-swiper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 84.5%

  .weekSwiper-item
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 120%
    margin-left: .2rem
    border: .02rem solid #ccc

  .weekSwiper-item-img
    overflow: hidden
    height: 0
    padding-bottom: 67.9%

  .weekSwiper-item-img > img
    max-width: 100%

  .weekSwiper-item-desc
    text-align: center
    padding-top: .2rem

  .weekSwiper-item-desc > p
    display: inline-block
    margin-top: 0.1rem
</style>
